<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" MasterPageFile="~/Views/Shared/Site.Master" %>

<asp:Content ContentPlaceHolderID="TitleContent" runat="server">
   Welcome
</asp:Content>

<asp:Content ContentPlaceHolderID="MainContent" runat="server">

   <h1>Welcome!</h1>

   <table id="users"></table>
   <div id="pager"></div>

</asp:Content>

<asp:Content ContentPlaceHolderID="ScriptContent" runat="server">

   <script type="text/javascript">

      $(function () {

         $('#users').jqGrid({
            url: '<%= Url.Action("Users", "Home") %>',
            datatype: 'json',
            mtype: 'POST',
            colNames: ['Name', 'URL', 'Reputation'],
            colModel: [
               { name: 'DisplayName', index: 'DisplayName', width: 150 },
               { name: 'WebsiteUrl', index: 'WebsiteUrl', width: 300 },
               { name: 'Reputation', index: 'Reputation', width: 100 }
            ],
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: 'pager',
            caption: 'Users',
            height: 'auto',
            onSelectRow: function (id) {
               location.href = '<%= Url.Action("Index", "Users") %>/' + id;
            }
         });

      });

   </script>

</asp:Content>